<script setup lang="ts">
import type { StudentWordItem } from '@/api/types/student'
import NavBar from '@/components/NavBar/index.vue'
import { useUnitStudyWordsStore } from '@/stores/modules/useUnitStudyWordsStore'
import { message } from '@/utils/message'
import HeaderTips from './components/HeaderTips.vue'
import SelectKnownWords from './components/SelectKnownWords.vue'

const unitStudyWordsStore = useUnitStudyWordsStore()

function handleWordsUpdate(updatedWords: StudentWordItem[]) {
  // 处理单词状态更新
  console.log('words updated:', updatedWords)
}

function handleStart(selectedWords: StudentWordItem[]) {
  // 处理开始背诵
  console.log('start learning with words:', selectedWords)
  // 可以跳转到背诵页面
  uni.redirectTo({
    url: '/pages/wordStudy/wordMemory',
  })
}

function handleRightClick() {
  message.info('跳转H5')
}

function handleLeftClick() {
  uni.navigateBack()
}
</script>

<template>
  <view class="select-known-page">
    <NavBar title="选择熟词" right-icon="question-circle" @right-click="handleRightClick" @left-click="handleLeftClick" />

    <HeaderTips>请点亮“小灯泡”标出学生熟识的单词，我们将进行分层学习~</HeaderTips>

    <SelectKnownWords
      :words="unitStudyWordsStore.currentGroup.words"
      @update:words="handleWordsUpdate"
      @on-start="handleStart"
    />
  </view>
</template>
